<template>
    <div class="counseling-box">
        <div class="counseling-head">
            <div>
                <span>身份证号：{{ishow ? showDocumentNumber : doctorInfo.documentNumber}}</span>
                <span @click="showCard()"><img src="@/assets/img/icon_display.png" alt=""></span>
            </div>
            <p>
                认证资料（如有不符，请于相关人员联系）
            </p>
        </div>
        <div class="counseling-img-box">
            <div>
                <div>
                    <img v-if="doctorInfo.documentJust" :src="doctorInfo.documentJust" alt="">
                    <span v-else>暂无图片</span>
                </div>
                <p>身份证正面照</p>
            </div>
            <div>
                <div>
                    <img v-if="doctorInfo.documentBack" :src="doctorInfo.documentBack" alt="">
                    <span v-else>暂无图片</span>
                </div>
                <p>身份证反面照</p>
            </div>
            <div>
                <div>
                    <img v-if="doctorInfo.physicianWorkCertificate" :src="doctorInfo.physicianWorkCertificate" alt="">
                    <span v-else>暂无图片</span>
                </div>
                <p>医师执业证（首页+个人信息页)</p>
            </div>
            <div>
                <div>
                    <img v-if="doctorInfo.physicianQualificationCertificate" :src="doctorInfo.physicianQualificationCertificate" alt="">
                    <span v-else>暂无图片</span>
                </div>
                <p>医师资格证（首页+毕业院校页)</p>
            </div>
            <div>
                <div>
                    <img v-if="doctorInfo.technologyQualificationCertificate" :src="doctorInfo.technologyQualificationCertificate" alt="">
                    <span v-else>暂无图片</span>
                </div>
                <p>专业技术资格证（职称证</p>
            </div>
        </div>
    </div>
</template>

<script>
import {deepClone} from '@/utils/index'
export default {
  name: 'counselingMessage',
  data() {
    return {
      doctorInfo: {},
      showDocumentNumber:'',
      ishow: false
    };
  },
  mounted() {
      this.getDoctorInfo()
  },
  methods: {
    getDoctorInfo() {
        this.$ajax.getDoctorInfo({}).then(res => {
            this.doctorInfo = deepClone(res.data)
            this.showDocumentNumber = this.doctorInfo.documentNumber
            this.doctorInfo.documentNumber = this.doctorInfo.documentNumber.replace(/^(.{6})(?:\d+)(.{4})$/, "$1****$2")
        }).catch(err => {
            this.$message({
            message: err.msg,
            type: "error",
            });
        });
    },
    // 显示身份证号码
    showCard() {
        this.ishow =!this.ishow
    }
  },
};
</script>

<style lang='scss'>
    .counseling-head {
        display: flex;
        justify-content: space-between;
        color: #3C3C3C;
        font-size: 14px;
        > div {
            > span:last-child {
                cursor: pointer;
                display: inline-block;
                width: 16px;
                height: 14px;
                margin-left: 10px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .counseling-img-box {
        display: flex;
        margin-top: 30px;
        flex-wrap: wrap;
        > div {
            width: 312px;
            border: 1px solid #DFDFDF;
            border-radius: 6px;
            height: 276px;
            margin: 5px;
            > div {
                text-align: center;
                line-height: 196px;
                height: 196px;
                margin: 20px;
                border-radius: 6px;
                overflow: hidden;
                background: #F2F2F2;
            }
            >p {
                text-align: center;
            }
        }
        img {
            width: 100%;
            height: 100%;
        }
    }
</style>
